<template>
    <div>
        <el-button size="small" type="primary" @click="cliCarouselImg" class="mb5 mr5"
        >
            新增轮播
        </el-button>
        <el-tag type="warning" size="plain">
            说明：“位置”填入数字，1是显示在小程序首页。
        </el-tag>
        <el-table :data="tempList" border class="wPer100">
            <el-table-column prop="id" label="轮播id" width="65">
            </el-table-column>
            <el-table-column prop="name" label="轮播名" width="110">
            </el-table-column>
            <el-table-column label="状态" width="85">
                <template slot-scope="scope">
                    {{
                        scope.row.type == 1 ? '启用' :
                        scope.row.type == 2 ? '禁用' : scope.row.type
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="85">
            </el-table-column>
            <el-table-column prop="position" label="位置" width="85">
            </el-table-column>
            <el-table-column label="轮播图" width="130">
                <template slot-scope="scope">
                    <el-image :preview-src-list="[scope.row.path]"
                        style="width: 100px; height: 100px"
                        :src="scope.row.path" fit="cover"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="url" label="小程序链接">
            </el-table-column>
            <el-table-column label="操作" width="110">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning"
                        @click="cliReviseBtn(scope.row)"
                    >
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="dialogFormType == 1 ? '新增轮播' : '修改轮播'"
            :visible.sync="dialogFormVisible1" width="375px"
        >
            <div class="mb14">
                <el-form :model="distributorData1" status-icon
                    :rules="distributorRules1" ref="distributorData1" label-width="120px"
                >
                    <el-form-item label="轮播名：" prop="name">
                      <el-input v-model="distributorData1.name" 
                        autocomplete="off" size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="链接：" prop="url">
                      <el-input v-model="distributorData1.url" 
                        autocomplete="off" size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="轮播图（1张）：" prop="path">
                        <el-upload list-type="picture-card" action=""
                            :auto-upload="false" :file-list="fileList"
                            :limit="1" :on-change="getFile" :multiple="false"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-tag type="warning" size="mini" class="woWrBreWor">
                          最佳尺寸宽355*高150
                        </el-tag>
                    </el-form-item>
                    <el-form-item label="排序：" prop="sort" v-if="dialogFormType == 2">
                      <el-input v-model="distributorData1.sort" 
                        autocomplete="off" size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="位置：" prop="position">
                      <el-input v-model="distributorData1.position" 
                        autocomplete="off" size="small" type="number"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="启用/禁用：" v-if="dialogFormType == 2">
                        <el-radio-group v-model="distributorData1.type">
                            <el-radio label="1">启用</el-radio>
                            <el-radio label="2">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="subDistributor()"
                        size="small" class="mr5"
                      >
                        提交
                      </el-button>
                      <el-button @click="resetDistributor('distributorData1')"
                        size="small"
                      >
                        重置
                      </el-button>
                  </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { apiAdminUploadBase64Pic, addBanner, saveBannerRule,
    getAdminBannerList } from '@s/api'
import { getBase64, imgUrl } from "@u/debounce";
export default {
    data() {
        let nameCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入轮播名'));
          } else {
            callback();
          }
        };
        let pathCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请上传轮播图'));
          } else {
            callback();
          }
        };
        let sortCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入排序'));
          } else {
            callback();
          }
        };
        let positionCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入位置'));
          } else {
            callback();
          }
        };
        return {
            dialogFormVisible1: false,
            dialogFormType: 1,
            fileList: [],
            distributorData1: {
                name: '', url: '', path: '',
                sort: '', position: '', type: '', id: ''
            },
            distributorRules1: {
                name: [{ validator: nameCheck, trigger: 'blur' }],
                path: [{ validator: pathCheck, trigger: 'blur' }],
                sort: [{ validator: sortCheck, trigger: 'blur' }],
                position: [{ validator: positionCheck, trigger: 'blur' }]
            },
            tempList: [],

        }
    },
    mounted() {
        this.getDataList1();
    },
    methods: {
        cliCarouselImg() {
            this.dialogFormType = 1;
            this.fileList = [];
            this.distributorData1 = {
                name: '', url: '', path: '',
                sort: '', position: '', type: '', id: ''
            };
            this.dialogFormVisible1 = true;
        },
        getFile(file, fileList) {
            getBase64(file.raw).then(res1 => {
                let postData = new FormData(); 
                postData.append('base64', res1);
                postData.append('token', this.$store.getters.token);
                apiAdminUploadBase64Pic(postData).then(res2 => {
                    this.$message({ type: "success", message: res2.message });
                    this.distributorData1.path = imgUrl + res2.data;
                    console.log(11, this.distributorData1)
                    console.log(22, res2)
                })
            })
        },
        subDistributor() {
            this.$refs['distributorData1'].validate(valid => {
                if(this.dialogFormType == 1) {
                    if(valid) {
                        let postData = new FormData(); 
                        postData.append('token', this.$store.getters.token);
                        postData.append('name', this.distributorData1.name);
                        postData.append('url', this.distributorData1.url);
                        postData.append('path', this.distributorData1.path);
                        postData.append('position', this.distributorData1.position);
                        addBanner(postData).then(res => {
                            this.dialogFormVisible1 = false;
                            this.$message({ type: "success", message: res.message });
                            this.getDataList1();
                        })
                    }
                }else if(this.dialogFormType == 2) {
                    if(valid) {
                        let postData = new FormData(); 
                        postData.append('token', this.$store.getters.token);
                        postData.append('name', this.distributorData1.name);
                        postData.append('url', this.distributorData1.url);
                        postData.append('path', this.distributorData1.path);
                        postData.append('sort', this.distributorData1.sort);
                        postData.append('position', this.distributorData1.position);
                        postData.append('type', this.distributorData1.type);
                        postData.append('id', this.distributorData1.id);
                        saveBannerRule(postData).then(res => {
                            this.dialogFormVisible1 = false;
                            this.$message({ type: "success", message: '修改成功' });
                            this.getDataList1();
                        })
                    }
                }
            })
        },
        resetDistributor(formName) {
            this.$refs[formName].resetFields();
        },
        getDataList1() {
            getAdminBannerList({token: this.$store.getters.token}).then(res => {
                if(res.data && res.data.length) this.tempList = res.data;
            })
        },
        cliReviseBtn(scopeRow) {
            this.dialogFormType = 2;
            this.fileList = [{
                name: scopeRow.name, url: scopeRow.path
            }];
            this.distributorData1 = {
                name: scopeRow.name, url: scopeRow.url, path: scopeRow.path,
                position: scopeRow.position,
                sort: scopeRow.sort, type: scopeRow.type, id: scopeRow.id
            }
            this.dialogFormVisible1 = true;
        }
    }
}
</script>